// Copyright 2017 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "variables";
@import "../../../core/src/components/button/common";

$nav-divider-offset: $pt-spacing * 12.5;

@mixin divider-gradient($color, $dark-color) {
  background-image: linear-gradient(to right, rgba($color, 0) 0%, $color 40%);

  .#{$ns}-dark & {
    background-image: linear-gradient(to right, rgba($dark-color, 0) 0%, $dark-color 40%);
  }
}

.docs-nav-button {
  @include pt-flex-container(row, ($pt-spacing * 2) + $pt-spacing);
  align-items: center;
  cursor: pointer;

  margin-left: -$nav-divider-offset;
  padding: ($pt-spacing * 2) $sidebar-padding;
  padding-left: $nav-divider-offset + $pt-spacing;

  &:hover {
    @include divider-gradient($pt-app-background-color, $pt-dark-app-background-color);
    color: inherit;
  }
}

.docs-nav-divider {
  @include divider-gradient($pt-divider-black, $pt-dark-divider-black);
  background-image: linear-gradient(to right, rgba($black, 0) 0%, $pt-divider-black 40%);
  height: 1px;
  margin-left: -$nav-divider-offset;
  padding: 0;
}
